<template>
  <!-- 发表帖子的界面 -->
  <div class="wrapper">
    <div class="head">
      <!--      <button @click="goback" class="goback">返回</button>-->
    </div>
    <!--      发布模块-->
    <div class="gostring">
      <van-field
        v-model="input"
        label="标题:"
        type="textarea"
        placeholder="标题内容"
        input-align="left"
      />
      <van-radio-group v-model="radio" direction="horizontal" required>
        <div v-for="(item, index) in list" :key="index">
          <van-radio :name="index" id="index" @click="add(index + 1)">{{
            item.name
          }}</van-radio>
        </div>
      </van-radio-group>
    </div>
    <div class="text">
      <textarea
        name=""
        id=""
        style="width: 100%; height: 180px; border: none; margin-top: 10px"
        placeholder="请输入内容"
        v-model="textarea"
      ></textarea>
    </div>
    <div style="padding-left: 120px; border: 1px dashed #ccc">
      <van-uploader
        v-model="fileList"
        :after-read="afterRead"
        :max-count="1"
        capture="camera"
      />
      <button class="lunch" @click="build">点击发布</button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { topicList, getPublish, pic } from "../api/api";
import { Toast } from "vant";
import Footer from "../components/Footer.vue";
export default {
  components: { Footer },
  created() {
    topicList().then((res) => {
      //   console.log(res);
      this.list = res.rows;
    });
  },

  data() {
    return {
      list: {},
      input: "",
      textarea: "",
      radio: "1",
      comping: "",
      url: "",
      typeid: "",
      fileList: [],
    };
  },
  methods: {
    //返回方法
    goback() {
      this.$router.back(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //   console.log(file);
      //   this.url = file.file;
      pic(file.file, "BBS").then((res) => {
        // console.log(res);
        this.url = res.url;
      });
    },
    add(id) {
      this.typeid = id;
    },
    build() {
      //   console.log(11111);
      //   console.log(this.url);
      getPublish(this.typeid, this.input, this.textarea, this.url).then(
        (res) => {
          //   console.log(res);
          if (res.code == 500) {
            Toast(res.msg);
          } else {
            Toast("发布成功");
            this.$router.push("/");
            // this.$store.commit("changeActive", { active: 0 });
          }
        }
      );
    },
  },
};
</script>
<style scoped lang="less">
.wrapper {
  /*background-color: rgba(157, 193, 238, 0.83);*/
}
.head {
  height: 40px;
  padding: 10px;
}

.lunch {
  margin-top: 4px;
  border-radius: 50%;
  font-size: 23px;
  color: #95b0e5;
  width: 80px;
  height: 80px;
  float: right;
  border: none;
  margin-right: 50px;
}
/deep/.van-uploader__upload {
  margin-top: 4px;
  background-color: #efefef;
}

.gostring {
  padding: 0 20px;
  border: 1px solid #cccccc;
  margin: 0 20px;
  /*background-color: rgba(139, 191, 224, 0.45);*/
}

.van-radio {
  margin: 5px 12px;
}

.goback {
  background-color: #1989fa;
  border: 0;
}

.text {
  height: 200px;
  padding: 0 20px;
  border: 1px solid #cccccc;
  margin: 10px 20px;
  /*background-color: rgba(139, 191, 224, 0.45);*/
}
/deep/.van-field--min-height {
  /*background-color: rgba(139, 191, 224, 0.45);*/
}
</style>